<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>

  .kerwinfade-enter-active, .kerwinfade-leave-active {
    transition: all 1.5s;
  }
  .kerwinfade-enter, .kerwinfade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(100px);
  }


  .kerwinbounce-enter-active {
    animation: bounce-in .5s;
  }
  .kerwinbounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }

</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>

    <!-- <h1 class="animated hinge infinite">1111111111111</h1> -->

    <div id="box">
      <button @click="isShow=!isShow">click</button>

      <transition name="kerwinfade">
        <div v-if="isShow">1111111111111</div>
      </transition>


      <transition name="kerwinbounce">
        <div v-if="isShow">222222222</div>
      </transition>
    </div>

    <script>
      var vm = new Vue({
        el:"#box",
        data:{
          isShow:false
        }
      })

    </script>
</body>
</html>